<template>
  <div class="feature-item" :class="{'animate': animated}">
    <div class="feature-icon">
      <i :class="'fas fa-' + feature.icon"></i>
    </div>
    <div class="feature-text">
      <h4>{{ feature.title }}</h4>
      <p>{{ feature.description }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

interface Feature {
  id: number
  icon: string
  title: string
  description: string
}

const props = defineProps<{
  feature: Feature
  delay?: number
}>()

const animated = ref(false)
const target = ref<HTMLElement | null>(null)

// 延迟动画
const delay = props.delay || 0

// 使用交叉观察器实现滚动动画
const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      setTimeout(() => {
        animated.value = true
      }, delay * 1000)
      stop()
    }
  },
  { threshold: 0.15 }
)
</script>

<style scoped lang="scss">
.feature-item {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  
  .feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.1);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  
  .feature-text {
    h4 {
      font-weight: 600;
      margin-bottom: 5px;
      color: var(--text-dark);
    }
    
    p {
      color: var(--text-medium);
      font-size: 0.95rem;
    }
  }
}
</style>
